<template>
    <div class="pe-scrollbar" ref="scrollRef" :class="[getHidden()]" :style="{ height, maxHeight, width, maxWidth }">
        <slot></slot>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

/**
 * @param width 宽度
 * @param max-width 最大宽度
 * @param height 滚动条高度
 * @param max-height 滚动条最大高度
 * @param type 滚动方向
 */
interface Props {
    width?: string,
    maxWidth?: string,
    height?: string,
    maxHeight?: string,
    type?: 'both' | 'horizontal' | 'vertical' | 'none'
}
const props = withDefaults(defineProps<Props>(), {
    height: "100%",
    type: "vertical"
})

/**
 * scroll 滚动事件
 */
const emits = defineEmits(["scroll"])

const scrollRef = ref()
onMounted(() => {
    scrollRef.value.onscroll = (event: any) => {
        emits("scroll", event.target.scrollTop)
    }
})

const getHidden = () => {
    if (props.type === "horizontal") {
        return "pe-scrollbar-yhidden"
    } else if (props.type === 'vertical') {
        return "pe-scrollbar-xhidden"
    } else if (props.type === 'none') {
        return "pe-scrollbar-yhidden pe-scrollbar-xhidden"
    }
}
</script>

<script lang="ts">
export default {
    name: "pe-scrollbar"
}
</script>